<template>
  <view class="headMain" :style="[{paddingTop: Number(statusBarHeight) + 'rpx'
}]">
    <view class="left">
      <image :src="userInfo?.head_img"></image>
      <view class="name">{{userInfo?.nickname}}</view>
    </view>
    <view class="right">
      {{userInfo?.major_one}}{{userInfo?.major_two ? ' + ' : ''}}{{userInfo?.major_two}}{{userInfo?.major_three ? ' + ' : ''}}{{userInfo?.major_three}}
    </view>  
  </view>
</template>

<script setup>
  import { computed, reactive } from 'vue'
  import { device }  from '@/utils/contanst.js'
  import { onShow } from  '@dcloudio/uni-app'
  const statusBarHeight = device.statusBarHeight * 2;
  const props = defineProps({
    userInfo: {
      type: Object,
      default: () => ({})
    }
  });
  console.log(25, props.userInfo)
</script>

<style lang="scss" scoped>
  .headMain{
    width: 750rpx;
    height: 198rpx;
    border-radius: 0 0 20rpx 20rpx;
    background: radial-gradient(132.09% 132.09% at 50% 47%, rgba(27, 79, 215, 0.48) 0%, #184BC9 46.63%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .left{
      margin-left: 40rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      image{
        width: 66rpx;
        height: 66rpx;
        margin-right: 20rpx;
        border-radius: 100%;
      }
      .name{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #ffffff;
      }
    }
    .right{
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #ffffff;
      margin-right: 30rpx;
    }
  }
</style>